<template>
  <div>
    <Window @close="close" @confirm="publishBlog">
      <!-- 内容部分 -->
      <div class="main">
        <el-form :model="blogFormData" :rules="rules" ref="blogFormRef">
          <el-form-item prop="title">
            <div style="width: 100%">
              <el-input
                placeholder="请输入博客标题"
                v-model="blogFormData.title"
              >
              </el-input>
            </div>
          </el-form-item>
          <el-form-item prop="content">
            <div :style="{ width: '100%' }">
              <EditorHtml
                v-model="blogFormData.content"
                v-if="blogFormData.editorType == 0"
              ></EditorHtml>
              <EditorMarkdown
                v-else
                v-model="blogFormData.markdownContent"
                @htmlContent="setHtmlContent"
              ></EditorMarkdown>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </Window>
  </div>
</template>

<script setup>
import {
  ref,
  getCurrentInstance,
  reactive,
  nextTick,
  onUnmounted,
} from "vue";
const { proxy } = getCurrentInstance();

// 博客正文
const blogFormData = ref({ tag: [] });

// 组件初始化
const init = (type, data) => {
  console.log(data);
  startTimer();
  nextTick(() => {
    proxy.$refs.blogFormRef.resetFields();
    blogFormData.value = { categoryId: data.categoryId, pBlogId: data.blogId };
    if (type == "add") {
      getUserInfo();
    } else {
      getBlogDetail(data.blogId);
    }
  });
};

// 暴露init
defineExpose({ init });

// 关闭窗口
const emit = defineEmits();
const close = () => {
  emit("close");
};

// 清除定时器
onUnmounted(() => {
  cleanTimer();
});

// 获取用户数据
const getUserInfo = async () => {
  let result = await proxy.Request({
    url: "/getUserInfo",
  });
  if (!result) {
    return;
  }
  blogFormData.value.editorType = result.data.editorType;
};


// 表单校验规则
const rules = {
  title: [{ required: true, message: "请输入标题", trigger: "blur" }],
  content: [{ required: true, message: "请输入正文" }],
};


// markdown编辑器设置编辑器html内容
const setHtmlContent = (htmlContent) => {
  blogFormData.value.content = htmlContent;
};

// 自动保存
const autoSave = async () => {
  if (
    blogFormData.value.title == undefined ||
    blogFormData.value.content == undefined ||
    timmer.value == null
  ) {
    return;
  }
  const params = {};
  Object.assign(params, blogFormData.value);
  let result = await proxy.Request({
    url: "/blog/autoSaveBlog4Special",
    params: params,
  });
  if (!result) {
    return;
  }
  blogFormData.value.blogId = result.data;
};

// 自动保存定时器
let timmer = ref(null);
const startTimer = () => {
  timmer.value = setInterval(() => {
    autoSave();
  }, 10000);
};
const cleanTimer = () => {
  if (timmer.value !== null) {
    clearInterval(timmer.value);
    timmer.value = null;
  }
};


// 获取博客详情
const getBlogDetail = async (blogId) => {
  let result = await proxy.Request({
    url: "/blog/getBlogById",
    params: {
      blogId: blogId,
    },
  });
  if (!result) {
    proxy.$message.error("获取博客详情失败");
    return;
  }
  blogFormData.value = result.data;
};

// 发布博客
const publishBlog = () => {
  proxy.$refs.blogFormRef.validate(async (valid) => {
    if (!valid) {
      proxy.$message.error("请完善博客信息");
      return;
    }
    const params = {};
    Object.assign(params, blogFormData.value);
    let result = await proxy.Request({
      url: "/blog/saveBlog4Special",
      params,
    });
    if (!result) {
      proxy.$message.error("保存失败");
      return;
    }
    proxy.$message.success(`保存成功`);
    emit("close");
  });
};
</script>

<style lang="scss" scoped>
.main {
  margin: 10px 0;
  width: 100%;
  height: calc(100vh - 234px);

  .btn {
    position: absolute;
    left: 76px;
    top: 20px;
  }
}
.allow-comment {
  display: flex;

  .info {
    margin-left: 20px;
    display: flex;
    height: 34px;
    line-height: 34px;
    opacity: 0.7;
  }
}

.tag-input-panel {
  height: 48px;
  display: flex;
  flex-wrap: wrap;

  .tag-list,
  .info,
  .tag-input {
    margin-right: 5px;
    height: 24px;
    line-height: 24px;
  }

  .tag-item {
    margin-right: 5px;
  }

  .info{
    opacity: 0.7;
  }

  .tag-input {
    width: 80px;
  }
}
</style>